<template>
  <div class="index-container">
    <!-- <el-header>
      <span>高凌峰</span>
    </el-header> -->
    <el-container class="index-container">
      <!-- 左侧导航区域 -->
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        router
      >
        <!-- 作业导航 -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <!-- 作业每一天导航组件 -->
          <MyDay></MyDay>
        </el-submenu>
        <!-- 笔记导航 -->
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </template>
          <!-- 作业每一天导航组件 -->
          <MyNote></MyNote>
        </el-submenu>
        <el-menu-item index="/book">
          <i class="el-icon-s-home"></i>
          <!-- <span slot="title">导航三</span> -->
        </el-menu-item>
        <el-menu-item @click="drawer = true" type="primary">
          <i class="el-icon-setting"></i>
          <!-- <span slot="title">导航四</span> -->
        </el-menu-item>
        <!-- 回到用户页面 -->
        <el-menu-item index="/myg">
          <i class="el-icon-s-promotion"></i>
        </el-menu-item>
      </el-menu>
      <!-- 主体 -->
      <el-container>
        <el-carousel height="200px" direction="vertical" :autoplay="false">
          <el-carousel-item v-for="item in 3" :key="item">
            <h3 class="medium">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
        <el-main>
          <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
          >
            <div class="el-drawer">
              <video loop autoplay>
                <source
                  src="../assets/MP4/2.1先行展示页-首页-雷电将军-无想一刀转场版-1080P-9比20.mp4"
                />
              </video>
            </div>
          </el-drawer>
          <!-- 作业展示区域 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 导入 作业每一天导航组件
import MyDay from '@/components/Day/Day.vue'
// 导入 笔记组件
import MyNote from '@/components/Day/A-Note/MyNote.vue'
export default {
  name: 'BookAppIndex',
  data() {
    return {
      isCollapse: true,
      drawer: false
    }
  },
  components: {
    MyDay,
    MyNote
  }
}
</script>

<style lang="less" scoped>
.el-drawer {
  width: 100%;
  height: 100%;
  background: url('../assets/image/index/13.png') no-repeat;
  background-size: cover;
  video {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
  }
}
.btns {
  position: fixed;
  right: 0;
  width: 200px;
  height: 50px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.index-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  overflow: hidden;
  .el-menu-vertical-demo {
    position: fixed;
    height: 100%;
    background-color: #3f3b54;
  }
  .el-header {
    background-color: #557c91;
    color: #333;
    line-height: 60px;
    text-align: right;
    font-size: 18px;
  }

  .el-main {
    background: url(../assets/image/indexbg.jpg);
    // background: url(../assets/image/bg.852123cds.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    .text {
      font-size: 14px;
    }
    .item {
      margin-bottom: 18px;
    }
  }
}
</style>
